<template>
  <div class="search">
    <div class="bigbox">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <router-link to="/home"
            ><img src="../../assets/image/18721.png" style="width: 8px"
          /></router-link>
        </div>
        <div class="h-title">搜索</div>
        <div class="h-right">
          <router-link to="/personal" class="book" style="margin-right: 10px"
            >书架</router-link
          >
        </div>
      </header>
      <!-- 中间搜索框 -->
      <div class="m-search">
        <!-- 输入框 -->
        <div class="inp">
          <input
            type="text"
            placeholder="小说关键字"
            v-model="keywords"
            @change="fictionList = []"
          />
        </div>
        <!-- 放大镜 -->
        <div class="magnifier" @click="getFictionApiFun"></div>
      </div>
      <!-- 历史搜索 -->
      <div class="historybox">
        <div class="history">
          <p>历史搜索</p>
          <p @click="del" class="del">
            <!-- 删除 -->
            <img src="../../assets/image/删除.png" alt="" />
            <span>清除记录</span>
          </p>
        </div>
        <!-- 历史搜索列表 -->
        <div class="hislist">
          <span v-for="(item, index) in hislist" :key="index">{{ item }}</span>
        </div>
      </div>

      <!-- 搜索列表数据渲染 -->
      <div class="course">
        <!-- 跳转详情页" -->
        <div
          class="courselist"
          v-for="(item, index) in fictionList"
          :key="index"
          v-show="keywords"
        >
          <div class="book-list">
            <div class="imgs">
              <img :src="item.fictionImg" alt="" />
            </div>
            <div class="conter">
              <div class="name">{{ item.titleName }}</div>
              <div class="username">{{ item.Author }}</div>
              <div class="infor-name">共{{ item.chapter }}章</div>
            </div>

            <router-link :to="'/noveldetail?id=' + item.id" tag="button"
              >立即阅读</router-link
            >
          </div>
        </div>
      </div>
      <div class="none" v-if="show">
        <div class="no_yuedu">
          <img src="../../assets/image/阅读历史.png" height="83" />
        </div>
        没有找到匹配数据
      </div>
      <!-- </router-link> -->
    </div>
    <div class="keyword">
      <span class="word">
        热搜关键字<span class="iconfont icon-lolremen"></span>
      </span>

      <!-- 类型选择列表 -->
      <typelist></typelist>
    </div>
    <!-- 24小时热搜 -->
    <div class="box2">
      <div class="all-title">
        24小时热搜
        <span class="iconfont icon-lolremen"></span>
        <div class="vip" style="color: #333" @click="change">换一换</div>
      </div>

      <div class="book-item">
        <router-link
          tag="div"
          class="item"
          v-for="(item, index) in datacontent"
          :key="index"
          :to="'/noveldetail?id=' + item.id"
        >
          <div class="item-img">
            <img :src="item.fictionImg" alt="" />
          </div>
          <span class="item-title">{{ item.titleName }}</span>
        </router-link>
      </div>
    </div>

    <!-- 页脚 -->
    <footermodule></footermodule>
  </div>
</template>

<script>
import footermodule from "../../components/FooterModule.vue";
import { getTypeList } from "../../api/home.js";
import { getFictionApi } from "../../api/novelmain.js";
import typelist from "../../components/typeList/typeList.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      typelist: null,
      fiction: null,
      datacontent: [], // 用来存放每次点击换一批出来的三张图片
      num2: "", // 用来放三个随机数
      arr: [], // 用来放三个随机数的数组，用来循环

      keywords: "", // 关键字
      fictionList: [], // 数据列表
      show: false, // 显示隐藏
      hislist: [], // 搜索历史列表
    };
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    getTypeListFun() {
      //小标签
      getTypeList().then((data) => {
        this.typelist = data.typelist;
      });
    },
    //每次点击换一批触发这个方法
    change() {
      this.num2 = "";
      this.arr = [];
      this.datacontent = []; // 每次点击换一批就让之前的数据全清空
      while (this.arr.length < 3) {
        // 用while来判断是否循环三次
        let num = parseInt(Math.random() * 10); // 随机出三个0-9之间的随机数
        if (this.arr.indexOf(num) == -1) {
          // 获得不重复的三个数
          this.arr.push(num);
          this.num2 = num;
          this.datacontent.push(this.fiction[this.num2]); // 将随机数当作下标来便利data里的内容
        }
      }
    },
    del() {
      // 删除
      this.hislist = [];
      // 本地清除
      localStorage.clear();
      Toast.success("清除成功");
    },
    //搜索
    getFictionApiFun() {
      getFictionApi().then((data) => {
        // console.log(data.fiction);
        var index = this.hislist.findIndex((ele) => {
          return ele == this.keywords;
        });
        //如果有的话就删除重复
        if (index != -1) {
          this.hislist.splice(index, 1);
        }
        //向数组第一位添加
        this.hislist.unshift(this.keywords);
        //如果数组长度大于4 就删除最后一项
        if (this.hislist.length > 4) {
          this.hislist.splice(5, 1);
        }
        // 本地存储历史记录数组
        localStorage.hislist = JSON.stringify(this.hislist);
        // console.log(this.keywords);
        this.fictionList = [];
        data.fiction.forEach((item) => {
          if (item.titleName.indexOf(this.keywords) != -1) {
            this.fictionList.push(item);
          }
        });

        // 有这个内容就显示，没有就隐藏
        if(this.fictionList.length==0){
          this.show = true
        }else{
          this.show = false

        }
      });
    },
  },
  created() {
    this.getTypeListFun();
    // 定义数组接收本地存储的历史记录
    let a = localStorage.hislist;
    if (a) {
      // 将数组转字符串
      this.hislist = JSON.parse(a);
    }
  },
  mounted() {
    getFictionApi().then((data) => {
      this.fiction = data.fiction;

      // 页面一加载的时候先出来三个对象的内容
      for (var i = 0; i < this.fiction.length; i++) {
        if (i < 3) {
          this.datacontent.push(this.fiction[i]);
        }
      }
    });
  },

  components: {
    typelist,
    footermodule,
  },
};
</script>

<style lang="scss" scoped>
.history {
  height: 35px;
  background-color: #fff;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0px 0px;
  .del {
    height: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    img {
      // width: 100%;
      width: 20px;
      height: 100%;
    }
  }
}
.hislist {
  padding: 10px;
  background-color: #fff;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  border-radius: 0px 0px 10px 10px;
  margin-bottom: 10px;
  & > span {
    border: 1px #d2d6d8 solid;
    padding: 2px 12px;
    line-height: 20px;
    border-radius: 15px;
    margin: 5px;
  }
}

.keyword {
  padding: 10px 0;
  background-color: #fff;
  color: #fa4c26;
  font-size: 16px;
  .word {
    margin-left: 10px;
  }
}
.all-title {
  color: #fa4c26;
}
.item-img {
  width: 106px;
  height: 135px;
  margin-bottom: 5px;
  img {
    width: 100%;
    height: 100%;
  }
}
.book-item {
  border-radius: 0px 0px 10px 10px;
  .line {
    background-color: transparent;
  }
}
.none {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  align-items: center;
}
</style>